<template>
  <div class="article-container">
    <div class="article-head">
      <slot name="Myhead"></slot>
    </div>
    <div class="article-body">
      <slot name="Mybody" msg="hellow vue" :user="userinfo"></slot>
    </div>
    <div class="article-folt">
      <slot name="Myfloot"></slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userinfo: {
        name: "张三",
        age: 10,
      },
    };
  },
};
</script>

<style lang="less" scoped>
.article-container {
  .article-head {
    height: 100px;
    background-color: indianred;
  }
  .article-body {
    height: 100px;
    background-color: lightgreen;
  }
  .article-folt {
    height: 40px;
    background-color: aqua;
  }
}
</style>